<template>
    <div class="container-xy">
        <Form ref="formInline" :model="form" :rules="ruleInline" :label-width="80">
            <FormItem prop="user" label="类型1">
                <TreeSelect v-model="form.user" :data="data1" v-width="200" />
            </FormItem>
            <FormItem prop="password" label="类型2">
                <TreeSelect v-model="form.password" :data="data1" v-width="200" />
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
                <Button type="primary" @click="handleReset('formInline')">reset</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
export default {
    name: "treeSelect",
    data() {
        return {
            form: {
                user: "",
                password: [],
            },
            ruleInline: {
                user: [
                    {
                        required: true,
                        message: "Please fill in the user name",
                        trigger: "change",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "Please fill in the password.",
                        trigger: "change",
                    }
                ],
            },
            key1: Math.random(),
            key2: Math.random(),
            value: "leaf2",
            value1: [],
            data1: [
                {
                    title: "parent1",
                    expand: true,
                    value: "parent1",
                    selected: false,
                    checked: false,
                    children: [
                        {
                            title: "parent 1-1",
                            expand: true,
                            value: "parent1-1",
                            selected: false,
                            checked: false,
                            children: [
                                {
                                    title: "leaf 1-1-1",
                                    value: "leaf1",
                                    selected: false,
                                    checked: false,
                                },
                                {
                                    title: "leaf 1-1-2",
                                    value: "leaf2",
                                    selected: false,
                                    checked: false,
                                },
                            ],
                        },
                        {
                            title: "parent 1-2",
                            expand: true,
                            value: "parent1-2",
                            selected: false,
                            checked: false,
                            children: [
                                {
                                    title: "leaf 1-2-1",
                                    value: "leaf3",
                                    selected: false,
                                    checked: false,
                                },
                                {
                                    title: "leaf 1-2-1",
                                    value: "leaf4",
                                    selected: false,
                                    checked: false,
                                },
                            ],
                        },
                    ],
                },
            ],
            data2: [
                {
                    title: "parent1",
                    expand: true,
                    value: "parent1",
                    selected: false,
                    checked: false,
                    children: [
                        {
                            title: "parent 1-1",
                            expand: true,
                            value: "parent1-1",
                            selected: false,
                            checked: false,
                            children: [
                                {
                                    title: "leaf 1-1-1",
                                    value: "leaf1",
                                    selected: false,
                                    checked: false,
                                },
                                {
                                    title: "leaf 1-1-2",
                                    value: "leaf2",
                                    selected: false,
                                    checked: false,
                                },
                            ],
                        },
                        {
                            title: "parent 1-2",
                            expand: true,
                            value: "parent1-2",
                            selected: false,
                            checked: false,
                            children: [
                                {
                                    title: "leaf 1-2-1",
                                    value: "leaf3",
                                    selected: false,
                                    checked: false,
                                },
                                {
                                    title: "leaf 1-2-1",
                                    value: "leaf4",
                                    selected: false,
                                    checked: false,
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    },
    watch: {
        value(val) {
            console.log(val);
        },
    },
    mounted() {
        setTimeout(() => {
            this.value1 = ["parent1", "parent1-1", "parent1-2"];
        }, 1000);
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success("Success!");
                } else {
                    this.$Message.error("Fail!");
                }
            });
        },
        handleReset(name){
            this.$refs[name].resetFields();
        }
    },
};
</script>